<template>
 <el-row :span="24">
    <el-col :span="18">
      <div class="app-container">
    <!-- 搜索框 -->
    <div class="search-box">
      <div class="input-container">
        <el-input
          v-model="searchQuery"
          placeholder="请输入设备名称"
          clearable
          class="google-style-input"
          @focus="isFocused = true"
          @blur="isFocused = false"
        >
          <template #prefix>
            <el-icon :size="20" class="search-icon">
              <Search />
            </el-icon>
          </template>
        </el-input>
        <div :class="['underline', { active: isFocused }]"></div>
      </div>
        <!-- 搜索按钮 -->
        <el-button type="primary" @click="loadDataList" class="search-button">
        搜索
      </el-button>
    </div>
    <!-- 设备列表 -->
    <el-table :data="filteredDevices" style="width: 100%" @row-click="showDetail">
      <el-table-column prop="name" label="设备名称" />
      <el-table-column  label="图像" >
        <template #default="{row}">
          <Cover
            :width="100"
            :height="100"
            :cover="row.imageUrl"
          ></Cover>
        </template>
      </el-table-column>
      <el-table-column prop="manufacturer" label="制造商" />
      <el-table-column prop="model" label="规格" />
    </el-table>
    <!-- 设备详情弹窗 -->
    <el-dialog v-model="detailVisible"  title="设备详情" width="40%">
    <!-- 甘特图展示已预约的时间段 -->
    <el-form
        :model="formData"
        :rules="rules"
        ref="formDataRef"
        label-width="120px"
        @submit.prevent
      >
       <el-form-item label="器材编号" prop="deviceId" >
          <el-input disabled :maxLength="400" placeholder="请输入器材名称" v-model="selectedDevice.deviceId" />
        </el-form-item>
        <el-form-item label="器材名称" prop="name" >
          <el-input disabled :maxLength="400" placeholder="请输入器材名称" v-model="selectedDevice.name" />
        </el-form-item>
        <el-form-item
          label="器材图片"
          prop="imageUrl"
          disabled
        >
        <Cover
            :width="200"
            :height="200"
            :cover="selectedDevice.imageUrl"
          ></Cover>
        </el-form-item>

        <el-form-item label="申请理由" prop="borrowReason"  >
          <el-input type="textarea" :maxLength="400"  v-model="formData.borrowReason" />
        </el-form-item>

        <el-form-item label="承诺归还时间" prop="promiseTime"  >
          <el-date-picker
            v-model="formData.promiseTime"
            type="date"
            placeholder="选择日期"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="detailVisible = false">关闭</el-button>
        <el-button type="primary" @click="reserveDevice">预约设备</el-button>
      </template>
  </el-dialog>
  </div>
    </el-col>
    <el-col :span="6">
      <el-card class="table-data-card">
        <template #header>
          <span>通知公告</span>
        </template>
        <Table
          ref="tableInfoRef"
          :columns="columns"
          :fetch="loadNoticeList"
          :dataSource="tableData"
          :options="tableOptions"
          :extHeight="tableOptions.extHeight"
          :showPagination="false"
        >
        <template #title="{index,row}">
            <a href="void::javascript(0)" class="a-link" @click="showNoticeDetil(row)">{{row.title}}</a>
        </template>
        </Table>
      </el-card>
    </el-col>
 </el-row>
 <NoticeDetail ref="noticeDetailRef">
 </NoticeDetail>
</template>
<script setup>
  import { Search } from '@element-plus/icons-vue'; // 引入搜索图标
  import { ref,computed, reactive, getCurrentInstance, nextTick } from "vue"
  import NoticeDetail from "./NotiveDetail.vue"
  const { proxy } = getCurrentInstance();


  // 禁用今天之前的日期
const disabledDate = (date) => {
  const today = new Date();
  today.setHours(0, 0, 0, 0); // 将时间设置为今天的 00:00:00
  return date < today; // 如果日期小于今天，则禁用
};

    const reserveDevice = async() => {
      formDataRef.value.validate(async (valid) => {
        if (!valid) {
          return;
        }
        let params = {
          ...formData.value,
          ...selectedDevice.value
        };
            // 将 params.promiseTime 转换为 Date 对象
        const promiseTime = new Date(params.promiseTime);
        if(disabledDate(promiseTime)){
          proxy.Message.error("只能选择今天之后日期");
          return;
        }
        let result = await proxy.Request({
          url: "/deviceApply/saveApply",
          params,
        });
        if (!result) {
          return;
        }
        proxy.Message.success("申请成功，请在个人中心查看详情");
        detailVisible.value = false;
      });
    };


  // 是否聚焦
  const isFocused = ref(false);

  const searchQuery = ref('');
  const filteredDevices=ref([]);
  const loadDataList = async () => {
      let params = {
        pageNo: 1,
        pageSize: 15,
        nameFuzzy:searchQuery.value,
      };
      let result = await proxy.Request({
        url: "/device/loadDeviceList4User",
        params: params,
      });
      if (!result) {
        return;
      }
      filteredDevices.value=result.data.list;
    };
  loadDataList();

  // 设备详情弹窗的显示状态
  const detailVisible = ref(false);

  // 当前选中的设备
  const selectedDevice = ref({});

  // 显示设备详情
  const showDetail = (device) => {
    formData.value={}
    selectedDevice.value = device;
    detailVisible.value = true;
  };

  const formData = ref({});
  const formDataRef = ref();
  const rules = {
    borrowReason: [{ required: true, message: "请填写申请理由" }],
    promiseTime: [{ required: true, message: "请选择承诺归还时间" }],
  };


  // 通知公告
  const tableData = ref({});
  const tableOptions = ref({
    extHeight: 125,
  });
  const columns = [
    {
      label: "名称",
      scopedSlots: "title",
    },
    {
      label: "发布时间",
      prop: "publishTime",
    },
  ];


  const tableInfoRef = ref();
  const searchForm = ref({});
  const loadNoticeList = async () => {
    let params = {
      pageNo: 1,
      pageSize: 5,
      type:2,
    };
    Object.assign(params, searchForm.value);
    let result = await proxy.Request({
      url: "/noticeInfo/loadNotice4User/",
      params: params,
    });
    if (!result) {
      return;
    }
    Object.assign(tableData.value, result.data);
  };


  // 展示通知详情
  const noticeDetailRef =ref();
  const showNoticeDetil=(data)=>{
    noticeDetailRef.value.showDetail(data);
  }

</script>

<style scoped>
.app-container {
  padding: 20px;
  height:calc(100vh - 120px);
  overflow-y:auto;
}

.search-box {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.input-container {
  position: relative;
  width: 500px; /* 设置输入框宽度 */
}

.google-style-input :deep(.el-input__inner) {
  border: none; /* 去掉边框 */
  border-bottom: 1px solid #e0e0e0; /* 底部线条 */
  padding: 12px 20px 12px 40px; /* 左侧留出图标空间 */
  font-size: 16px;
  transition: all 0.3s ease;
  background-color: transparent; /* 透明背景 */
  box-shadow: none; /* 去掉阴影 */
}

.google-style-input :deep(.el-input__inner:focus) {
  border-bottom-color: transparent; /* 聚焦时去掉底部线条 */
}

.search-icon {
  color: #909399; /* 图标颜色 */
  margin-right: 10px;
  transition: color 0.3s ease;
}

.google-style-input :deep(.el-input__inner:focus) + .search-icon {
  color: #409eff; /* 聚焦时图标颜色 */
}

.underline {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #409eff; /* 线条颜色 */
  transform: scaleX(0); /* 初始状态不可见 */
  transition: transform 0.3s ease;
}

.underline.active {
  transform: scaleX(1); /* 聚焦时显示线条 */
}
</style>